<template>
	<view class="ys">
		<view class="mlist">
			<view class="mitem">
				<view class="text">
					实时监控
				</view>
				<view class="icon">
					<i class="iconfont icon-header-14"></i>
				</view>
			</view>
			<view class="mitem">
				<view class="text">
					房屋建档
				</view>
				<view class="icon">
					<i class="iconfont icon-hetong"></i>
				</view>
			</view>
			<view class="mitem">
				<view class="text">
					异常统计
				</view>
				<view class="icon">
					<i class="iconfont icon-yonghutongji"></i>
				</view>
			</view>
			<view class="mitem">
				<view class="text">
					报警信息
				</view>
				<view class="icon">
					<i class="iconfont icon-baojing1"></i>
				</view>
			</view>
		</view>
		<view class="servelist">
			<view class="sitem" v-for="(item,index) in serveList" :key="index">
				<view class="icon">
					<i class="iconfont" :class="item.icon"></i>
				</view>
				<text>{{item.text}}</text>
			</view>
		</view>
		<view class="adbox">
			<image src="/static/img/ad1.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serveList: [{
						text: '我的审核',
						icon: 'icon-shoufeiguanli',
						url: ''
					},
					{
						text: '客服中心',
						icon: 'icon-kefu',
						url: ''
					},
					{
						text: '帮助中心',
						icon: 'icon-bangzhu',
						url: ''
					},
					{
						text: '专员打卡',
						icon: 'icon-qiandao-kaoqindaqia',
						url: ''
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.ys {
		position: relative;
		padding: 0 2%;
	}

	.mlist {
		display: flex;
		padding: 0 2%;
		margin-top: 40px;
		justify-content: space-between;
		flex-wrap: wrap;

		.mitem {
			width: 48%;
			padding: 15px 20px 30px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			background: rgba(252, 121, 65, 0.15);
			font-size: 15px;
			color: rgba(252, 121, 65, 1);
			border-radius: 5px;
			text-align: center;
			margin-bottom: 10px;

			i {
				font-size: 35px;
			}

			.icon {
				text-align: right;
			}

			&:nth-child(2) {
				background: rgba(126, 126, 175, 0.08);
				color: rgba(126, 126, 175, 1);
			}

			&:nth-child(3) {
				background: rgba(75, 169, 243, 0.08);
				color: rgba(75, 169, 243, 1);
			}

			&:nth-child(4) {
				background: rgba(0, 186, 173, 0.08);
				color: rgba(0, 186, 173, 1);
			}
		}
	}

	.servelist {
		display: flex;
		background: #fff;
		background: #fff;
		border-radius: 5px;
		padding: 20px 10px 0;
		box-sizing: border-box;
		width: 96%;
		margin: 0 auto;
		flex-wrap: wrap;
		margin-top: 10px;

		.sitem {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			width: 25%;
			margin-bottom: 20px;

			.icon {
				background: rgba(252, 121, 65, 0.1);
				border-radius: 50%;
				width: 50px;
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 5px;
			}

			i {
				color: #FC7941;
				font-size: 30px;
			}
		}

	}

	.adbox {
		margin-top: 10px;
		padding: 0 2%;

		image {
			width: 100%;
		}
	}
</style>